<template>
  <VuePdfEmbed
    :source="fileStore.curFileInfo.url"
    @loaded="loadHandle"
    class="w-full h-full"
    :scale="2"
  />
</template>

<script setup>
import VuePdfEmbed from 'vue-pdf-embed'
import { useFileStore, useFlagStore } from '@/stores'
import 'vue-pdf-embed/dist/style/index.css'
const fileStore = useFileStore()
const flagStore = useFlagStore()
onMounted(() => {
  flagStore.setPreviewSpinner(true)
})
const loadHandle = () => {
  flagStore.setPreviewSpinner(false)
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
<style lang="scss">
.vue-pdf-embed {
  div {
    width: 100%;
  }
  canvas {
    width: 100% !important;
    height: 100% !important;
  }
}
.vue-pdf-embed__page {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),
    0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
    var(--tw-shadow);
  margin-bottom: 50px;
  transition: 0.3s;
}
.vue-pdf-embed__page:hover {
  transform: scale(1.02);
}
</style>
